import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

import Content from './content';

import Bg from './examples/draw_triangle';
import Demo from './examples/test_drawInstanced';
import StencilTest from './examples/test_stencil';

ReactDOM.render(<Content/>,document.getElementById('root'));

// start
let gl;
window.onload = function () {
    console.log('start......');

    let canvas = document.getElementById('content');
    gl = canvas.getContext('webgl2',{
        depth:true,
        stencil:true
    });
    if(!gl){
        console.error('webgl2 error!');
        return;
    }
    console.log('devicePixelRatio:',window.devicePixelRatio);
    console.log(canvas.clientWidth,canvas.clientHeight);
    console.log('canvas before set width and height:',canvas.width,canvas.height);
    canvas.width = canvas.clientWidth * window.devicePixelRatio;
    canvas.height = canvas.clientHeight * window.devicePixelRatio;
    console.log('canvas after set width and height:',canvas.width,canvas.height);
    gl.viewport(0,0,canvas.width,canvas.height);

    // let testPromise = fileUtils.async_loadFile('index.html');
    // testPromise.then((text)=>{
    //     console.log(text);
    // }).catch((err)=>{
    //     console.error('err:',JSON.stringify(err));
    // });

    Demo.init(gl);
    Bg.init(gl);
    StencilTest.init(gl);

    loop();
};

function loop() {
    requestAnimationFrame(loop);

    gl.clear(gl.COLOR_BUFFER_BIT);
    Bg.render();
    Demo.render();
    StencilTest.render();
}